<template>
	<div class="homeBox">
		<home-header class="header" :data="data"></home-header>
		<div class="body">
			<el-amap v-if="jiazaiAmap" style="height: 100%;width: 100%;" :amap-manager="amapManager" :vid="'amap-vue'" :zoom="zoom"
			 :events="events1" :plugin="plugin" :center="center">
				<el-amap-info-window v-for="(item,index) of infoWindowList" :key="'key1_' + item.index" v-if="item.visible"
				 :position="item.position" :visible="item.visible" :content="item.content"></el-amap-info-window>
				<el-amap-marker v-for="(item, index) in infoWindowList" :key="'key2_' + item.index" :position="item.position"
				 :events="events2" :icon="item.statusValue == '在建'?zaijianICON:item.statusValue == '停工'?tinggongICON:item.statusValue == '完工'?wangongICON:choubeiICON" />
				 <!-- :icon="item.statusValue == '在建'?zaijianICON:item.statusValue == '停工'?tinggongICON:item.statusValue == '完工'?wangongICON:choubeiICON" -->
			</el-amap>
		</div>
		<div style="display:none;">
			<info-window ref="infoWindow" :projectInfo="projectInfo"></info-window>
		</div>
	</div>
</template>

<script>
	import icon from '../../icons/svg/edit.svg'
	import infoWindow from '../../components/AmapInfoWindow/index.vue'
	import {
		AMapManager,
		lazyAMapApiLoaderInstance
	} from 'vue-amap'
	let amapManager = new AMapManager()
	import homeHeader from './adminHomeHeader.vue'
	import homeLeft from './homeLeft.vue'
	import homeRight from './homeRight.vue'
	import {
		post
	} from '../../api/myFunction.js'
	export default {
		name: 'userHome',
		data() {
			var that = this
			return {
				zaijianICON: require('../../assets/pic/zaijian.png'),
				tinggongICON: require('../../assets/pic/tinggong.png'),
				wangongICON: require('../../assets/pic/wangong.png'),
				choubeiICON: require('../../assets/pic/choubei.png'),
				projectInfo: {},
				jiazaiAmap: false,
				component: '',
				infoWindowList: [],
				windows: [],
				nodes0: [],
				amapManager,
				center: [106.630153, 26.647661],
				events1: {
					// 点击获取地址的数据
					click(a) {
						for (var i = 0; i < that.infoWindowList.length; i++) {
							that.infoWindowList[i].visible = false
						}
					},
				},
				events2: {
					// 点击获取地址的数据
					click(a) {
						var saveLat = a.target.w.position.lat
						var saveLng = a.target.w.position.lng
						for (var i = 0; i < that.infoWindowList.length; i++) {
							if (that.infoWindowList[i].position[0] == saveLng && that.infoWindowList[i].position[1] == saveLat) {
								that.infoWindowList[i].visible = !that.infoWindowList[i].visible
								that.projectInfo = {
									name: that.infoWindowList[i].name,
									bankCodeName: that.infoWindowList[i].bankCodeName,
									categoryName: that.infoWindowList[i].categoryName,
									contractPrice: that.infoWindowList[i].contractPrice,
									statusValue: that.infoWindowList[i].statusValue,
								}
								break
							}
						}
					},
					mouseover(a) {
						// console.log(a)
					}
				},
				zoom: 10,
				plugin: [],
				data: {
					entNum: 0,
					projectIngNum: 0,
					projectNum: 0,
					workerNum: 0,
					attNum: 0
				},
				att: [],
				project: {},
				age: [],
				team: [],
			}
		},
		components: {
			homeHeader,
			homeLeft,
			homeRight,
			infoWindow
		},
		mounted() {
			setTimeout(() => {
				this.jiazaiAmap = true
				setTimeout(() => {
					this.initData()
				}, 100)
			}, 100)
		},
		methods: {
			ceshi() {
				alert('测试')
			},
			initData: function() {
				post(this, 'GET', 'sys/index', {}, (res) => {
					this.infoWindowList = []

					this.data.entNum = res.data.entNum
					this.data.projectIngNum = res.data.projectIngNum
					this.data.projectNum = res.data.projectNum
					this.data.workerNum = res.data.workerNum
					this.data.attNum = res.data.attNum


					for (var i = 0; i < res.data.projects.length; i++) {
						var element = res.data.projects[i]
						this.infoWindowList.push({
							index: i,
							position: [element.lng, element.lat],
							visible: false,
							// content: this.$refs['infoWindow_' + i].$el,
							content: this.$refs.infoWindow.$el,


							name: element.name,
							bankCodeName: element.bankCodeName,
							categoryName: element.categoryName,
							contractPrice: element.contractPrice,
							statusValue: element.statusValue,
						})
					}
					this.$forceUpdate()
				}, (err) => {
					console.log(err)
				})
			},
			openWindow: function() {
				this.$nextTick(() => {
					this.currentWindow[0].visible = !this.currentWindow[0].visible
				});
			},
		}
	}
</script>

<style scoped>
	.homeBox {
		width: 100%;
		height: calc(100vh - 50px - 34px);
		min-width: 1500px;
		min-height: 800px;
		display: flex;
		flex-direction: column;
		padding: 20px;
	}

	.header {
		height: 182px;
		width: 100%;
		background-color: #fff;
	}

	.body {
		flex: 1;
		width: 100%;
		display: flex;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .3);
		height: 180px;
		margin-bottom: 20px;
		box-sizing: border-box;
	}

	.left {
		width: 30%;
		margin-right: 20px;
		height: 100%;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .3);
		box-sizing: border-box;
		padding: 10px;
		/* background-color: #f3f3f3; */
	}

	.right {
		flex: 1;
		height: 100%;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .3);
		box-sizing: border-box;
	}
</style>
